<template>
  <div class="dialog-wrapper" v-if="showPicList" >
    <div class="dialog-block" style="width: 105%;">
      <i class="el-icon-circle-close-outline icon-del"
         @click="changeShow"
      ></i>
      <div class="dialog">
        <p class="title">从图片库进行选择<el-input
                placeholder="请输入内容"
                class="searbtn"
                suffix-icon="el-icon-search"
                v-model="searchContent">
              </el-input></p>
        <div class="foot-wrapper">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[21, 18, 15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
     
      <div class="picture-wrapper" :class="[picLength]">
        <div class="picture-item-wrapper"  v-for="(item, index) in picArr" :key="index" >
          <div class="picture-item">
            <div class="picture"><img class="item-pic" :src="item.image" alt=""></div>
            <p class="txt">{{item.name}}</p>
            <div class="chousebox">
              <el-radio size="medium" v-model="picradio" class="picradio" :label="index" @change="picChouse(item)"></el-radio >
            </div>
          </div>
        </div>
      </div>
         <el-button type="primary" class="btnConfirm" @click="btnConfirm(picchock)">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getPic} from '@/api/picPool'
export default {
  name: "piclist",
  props: {
    showPicList: {
      type: Boolean,
      default: false
    },
    dialogpicList: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
    	imgid:"",
    	imgsrc:"",
      picArr: [],
      picchock:[],
      picradio:'1',
       currentPage: 1,
       pageSize:21,
       total:0,
      searchContent: "",
      picLength: "change21",
      imgname:""
    };
  },
  mounted() {
     this.getpiclist(this.pageSize,this.currentPage);
    console.log(this.showPicList + "=" + this.dialogpicList);
  },
  methods: {
     handleSizeChange (val) {
      
      this.pageSize=val;
      this.getpiclist(this.pageSize,this.currentPage);
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(val);
      this.currentPage=val;
       this.getpiclist(this.pageSize,this.currentPage);
      console.log(`当前页: ${val}`)
    },
    getpiclist(pageSize,page){
      let pagelist={
        page:page,
        pageSize:pageSize
      }
      getPic(pagelist).then(res => {
      let data=res.data.data 
        this.total=res.data.elementsSum
        data.forEach(item=>{
          item.image='http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.storeId
        })
        this.picArr = data;
    })
    },
    picChouse(val){
      
      this.imgid=val.id;
      this.imgsrc=val.image;
      this.imgname=val.name
      console.log(val,"********")
      
    },
    btnConfirm(val){
       console.log(val);
       this.$emit("hidden-piclist",false,this.imgsrc,this.imgid,this.imgname);
      
    },
    uploadChange(event) {},
    upload() {},
    changeShow() {
      this.$emit("hidden-piclist",false,this.imgsrc,this.imgid,this.imgname);
    },
    uploadPic() {}
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dialog-wrapper {
  position: absolute;
  top: -44px;
  left: -46px;
  width: calc(100% + 88px);
  height: calc(100% + 44px);
  text-align: center;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
  .dialog-block {
    margin-left: 82px;
    .icon-del {
      margin-top: 182px;
      font-size: 34px;
      padding: 30px;
      cursor: pointer;
      color: #fff;
      &::after {
        display: block;
        width: 1px;
        height: 52px;
        margin-left: 50%;
        margin-bottom: -34px;
        background-color: #fff;
        content: "";
      }
    }
    .dialog {
      position: relative;
      width: 92%;
      height: 948px;
      padding: 8px;
      //margin-left: calc(50% - 388.8888px);
      border-radius: 10px;
      background-color: #fff;
      .el-pagination {
        text-align: left;
        margin: 8px;
        padding-left: 20px;
      }
      .searbtn {
        width: 200px;
        display: inline-block;
        float: right;
      }
      .title {
        margin: 0;
        text-align: left;
        line-height: 20px;
        font-size: 20px;
        font-weight: 700;
        &::before {
          display: inline-block;
          margin: 12px 10px 0 12px;
          vertical-align: bottom;
          width: 8px;
          height: 20px;
          background-color: #2ce2e0;
          content: "";
        }
      }
      .picture-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 1548px;
        height: 680px;
        overflow: hidden;
        padding: 38px 0 42px 0;
        &.change21 {
          width: 1494.5px;
          padding-left: 26.75px;
          padding-right: 26.75px;
          .picture-item-wrapper {
            flex-basis: 14.2857%;
          }
        }
        &.change18 {
          width: 1464px;
          padding-left: 42px;
          padding-right: 42px;
          .picture-item-wrapper {
            flex-basis: 16.666666%;
          }
        }
        &.change15 {
          width: 1423px;
          padding-left: 62.333px;
          padding-right: 62.333px;
          .picture-item-wrapper {
            flex-basis: 20%;
          }
        }
        .picture-item-wrapper {
          display: flex;
          justify-content: center;
          flex: 0;
          .picture-item {
            width: 160px;
            height: 186px;
            padding-top: 14px;
            border-radius: 3px;
            box-shadow: 0 7px 12px 4px #e2e2e2;
            background-color: #f0f4fa;
            .picture {
              position: relative;
              width: 120px;
              height: 120px;
              margin: 0 20px 12px 20px;
              display: flex;
              justify-content: center;
              overflow: hidden;
              user-select: none;
              background-color: #29333d;
              .item-pic {
                position: absolute;
                max-width: 120px;
                max-height: 120px;
                margin: auto;
                margin-left: -120px;
                top: 0;
                bottom: 0;
                border-right: 0 solid transparent;
                filter: drop-shadow(120px 0 #93c4ff);
              }
            }
            .txt {
              margin: 12px 0;
              text-align: center;
              line-height: 18px;
              font-size: 18px;
            }
            .chousebox {
              position: relative;
              text-align: center;
              .picradio .el-radio__label{
                display: none;
              }
            }
          }
        }
      }
      .inp-wrapper {
        margin-top: 48px;
        text-align: left;
        .inp-name {
          margin: 0 9px 0 29px;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
